<template>
  <div>
    <x-header :left-options="{showBack: true,preventGoBack:true}"
              @on-click-back="goBack" theme="" class="queryHeader">新增保险方案
    </x-header>
    <div>
      <group>
        <cell title="保险对象" v-if="locked">
          <div><span>{{scheme.insuredTarget}}</span></div>
        </cell>
        <selector :value-map="['value','text']" direction="rtl" title="保险对象"
                  v-model="scheme.insuredTarget" v-if="!locked"
                  :options="insuredTargets" placeholder="请选择保险对象"></selector>
      </group>
      <group>
        <x-input text-align="right" style="padding: 12px 15px;" placeholder="请填写对象名称"
                 type="text" v-model="scheme.targetName" title="对象名称" :readonly="locked"></x-input>
        <x-input text-align="right" style="padding: 12px 15px;" placeholder="请输入方案编号" v-show="false"
                 type="number" v-model="scheme.planId" title="方案编号" :readonly="locked"></x-input>
        <cell title="职业类别" v-if="locked">
          <div><span>{{scheme.occupationType}}</span></div>
        </cell>
        <selector :value-map="['value','text']" direction="rtl" title="职业类别"
                  v-model="scheme.occupationType" v-if="!locked"
                  :options="vocations" placeholder="请选择职业类别"></selector>
      </group>
      <group title="人员信息">
        <x-input text-align="right" style="padding: 12px 15px;" placeholder="请填写人数" :is-type="basicRule"
                 type="number" v-model="scheme.peoples" title="人数" :readonly="locked"></x-input>
        <x-input text-align="right" style="padding: 12px 15px;" placeholder="请输入平均年龄" :is-type="basicRule"
                 type="number" v-model="scheme.avgAges" title="平均年龄" :readonly="locked"></x-input>
      </group>
      <group title="保险时间">
        <!--选择年月单位-->
        <selector :value-map="['value','text']" direction="rtl" title="保险期间单位"
                  v-model="scheme.insuredFlag" v-if="!locked" @on-change="onUnitChange"
                  :options="units" placeholder="请选择保险期间单位">
        </selector>
        <!--锁定后显示的单位-->
        <x-input text-align="right" style="padding: 12px 15px;" placeholder="请输入保险期间单位"
                 v-if="locked" :readonly="locked"
                 type="text" v-model="scheme.insuredFlagName" title="时间单位"></x-input>
        <!--选择月单位对应的月数-->
        <selector :value-map="['value','text']" direction="rtl" title="保险期间"
                  :readonly="locked"
                  v-model="scheme.insuredLength" v-if="scheme.insuredFlag === 'M'"
                  :options="months" placeholder="请选择保险期间" @on-change="updateMonth">
        </selector>
        <!--填写选择年对应的天数-->
        <x-input text-align="right" style="padding: 12px 15px;" placeholder="请输入保险期间"
                 v-if="scheme.insuredFlag !== 'M'" :readonly="readonly"
                 type="number" v-model="scheme.insuredLength" title="保险期间"></x-input>
      </group>
      <group title="特约选择">
        <cell title="特别约定" is-link style="padding: 11px 15px;" @click.native="addAppoints">
          <span slot="default">{{scheme.specialAppoints.length > 0 ? '查看' : '可选'}}</span>
        </cell>
      </group>
      <group title="险种以及责任信息">
        <cell title="添加险种责任" is-link style="padding: 11px 15px;" @click.native="addInsurances">
          <span slot="default">{{scheme.duties.length > 0 ? '查看' : '新增'}}</span>
        </cell>
      </group>
      <box style="padding: 10px;">
        <x-button type="primary" class="positiveBtn" @click.native="onSaveSchemeInfo">保存
        </x-button>
      </box>
    </div>
    <popup v-model="showPopup" position="top" :show-mask="false">
      <div class="position-vertical-demo">
        {{toastTxt}}
      </div>
    </popup>
  </div>
</template>
<script>
  import {XHeader, Group, Cell, Selector, Box, XButton, XInput, Popup} from 'Vux'
  export default {
    components: {
      XHeader,
      Group,
      Cell,
      Selector,
      Box,
      XButton,
      XInput,
      Popup
    },
    data(){
      return {
        showPopup: false,
        toastTxt: "",
        readonly: true,
        locked: false,
        scheme: {
          insuredTarget: "",
          targetName: "",
          planId: "119",
          occupationType: "",
          peoples: "",
          avgAges: "",
          insuredLength: "1",
          insuredFlag: "Y",
          insuredFlagName: "年",
          duties: [],
          specialAppoints: []
        },
        units: [
          {
            value: "Y",
            text: "年"
          },
          {
            value: "M",
            text: "月"
          }
        ],
        insuredTargets: [
          {
            value: "A",
            text: "A"
          },
          {
            value: "B",
            text: "B"
          }
        ],
        vocations: [],
        insuranceInfo: null,
        ableSaveFlag: false
      }
    },
    computed: {
      months(){
        let array = [];
        for (let i = 1; i < 12; i++) {
          array.push({
            value: i,
            text: i
          })
        }
        return array
      }
    },
    watch: {
      scheme: {
        handler(){
          let scheme = {
            insuredTarget: "",
            targetName: "",
            occupationType: "",
            peoples: "",
            avgAges: "",
            insuredYear: "",
            insuredYearFlagCode: ""
          };
          let ary = Object.keys(scheme);
          let flag = false;
          for (let i = 0; i < ary.length; i++) {
            if (this.scheme[ary[i]] === "") {
              flag = true
            }
          }
          if (this.scheme.insuredFlag !== "Y") {
            this.readonly = false
          } else {
            this.readonly = true
          }
          this.ableSaveFlag = !flag;
          if (this.scheme.avgAges !== "") {
            this.scheme.avgAges = Math.round(this.scheme.avgAges)
          }
        },
        deep: true
      },
      showPopup (val) {
        if (val) {
          setTimeout(() => {
            this.showPopup = false
          }, 1500)
        }
      }
    },
    methods: {
      //数据校验
      basicRule(value){
        if (value < 0) {
          return {
            valid: false,
            msg: '请输入大于零的数值哦'
          }
        } else {
          if (value.toString().split('.').length > 1) {
            return {
              valid: false,
              msg: '输入数据格式不符'
            }
          } else {
            return {
              valid: true
            }
          }
        }
      },
      //唤起toast提示
      vuxToast(info){
        this.showPopup = true;
        this.toastTxt = info;
      },
      //返回录入界面并保存一定信息
      goBack(){
        this.$router.push('/inquiry');
        this.$store.commit('INIT_CURRENT_INDEX', 3);
        this.$store.commit('REMOVE_HAD_INSURANCES');
        this.$store.commit('REMOVE_SCHEME');
        this.$store.commit('REMOVE_HAD_APPOINTS');
        this.$store.commit('CHANGE_TRANSITION', 'right')
      },
      //保险期间单位变更
      onUnitChange(value){
        let origin = this.scheme.insuredLength;
        for (let i = 0; i < this.units.length; i++) {
          if (this.units[i].value === value) {
            this.scheme.insuredFlagName = this.units[i].text;
          }
        }
        this.scheme.insuredFlag = value;
        if (value === "Y") {
          this.scheme.insuredLength = "1";
        } else {
          this.scheme.insuredLength = origin
        }
      },
      //月份变更
      updateMonth(value){
        this.scheme.insuredLength = value;
      },
      //新增选择特约
      addAppoints(){
        this.$store.commit('SET_CURRENT_SCHEME_INFO', this.scheme);
        this.$router.push('/addAppoint');
        this.$store.commit('CHANGE_TRANSITION', 'left')
      },
      //增加险种信息（责任）
      addInsurances(){
        if (this.ableSaveFlag) {
          this.$vux.loading.show({
            text: '加载中'
          });
          this.$store.commit('SET_CURRENT_SCHEME_INFO', this.scheme);
          setTimeout(() => {
            if (this.scheme.duties.length > 0) {
              this.$router.push('/viewInsurance');
            } else {
              this.$router.push('/addInsurances');
            }
            this.$store.commit('CHANGE_TRANSITION', 'left');
            this.$vux.loading.hide();
          }, 300)
        } else {
          this.vuxToast('请先填写以上信息')
        }
      },
      //保存方案信息
      onSaveSchemeInfo(){
        if (this.ableSaveFlag && this.scheme.duties.length > 0) {
          this.$vux.loading.show({
            text: '保存中'
          });
          setTimeout(() => {
            this.$store.commit('SAVE_NEW_SCHEME', this.scheme);
            this.$store.commit('INIT_CURRENT_INDEX', 3);
            this.$store.commit('REMOVE_HAD_INSURANCES');
            this.$store.commit('REMOVE_HAD_APPOINTS');
            this.$store.commit('SAVE_FASTEN_UNIT', {
              insuredFlag: this.scheme.insuredFlag,
              insuredLength: this.scheme.insuredLength,
              insuredFlagName: this.scheme.insuredFlagName
            });
            this.$store.commit('SAVE_HAD_TARGET', this.scheme.insuredTarget);
            this.$vux.loading.hide();
            this.$router.push('/inquiry');
            this.$store.commit('CHANGE_TRANSITION', 'right')
          }, 500)
        } else {
          this.vuxToast('请填写完整信息');
        }
      }
    },
    mounted(){
      let scheme = this.$store.state.app.currentScheme;
      let vocations = this.$store.state.app.vocations;
      let unit = this.$store.state.app.fastenUnit;
      let target = this.$store.state.app.target;
      if (scheme) {
        this.scheme = scheme
      }
      if (this.$store.state.app.currentInsurances.length > 0) {
        this.locked = true
      } else {
        this.locked = false
      }
      if (unit) {
        this.insuredFlagName = unit.insuredFlagName;
        this.scheme.insuredFlag = unit.insuredFlag;
        this.scheme.insuredLength = unit.insuredLength;
      }
      if (vocations.length > 0) {
        this.vocations = vocations
      }
      if (target) {
        let originTargets = this.insuredTargets;
        for (let i = 0; i < originTargets.length; i++) {
          if (target === originTargets[i].value) {
            originTargets.splice(i, 1)
          }
        }
        this.insuredTargets = originTargets;
      }
    }
  }
</script>
